<template>
	<view class="talent-container">
		<CustomNav :nav-info="navInfo" />
		<view class="talent-container-top">
			<view class="talent-container-banner">
				<image style="width:100%" src="https://ltzn.oss-cn-zhangjiakou.aliyuncs.com/ren_cai_ji_tuan/talent/banner.png" mode="aspectFill"></image>
			</view>
			<view class="toggle-btn" @click.native="toggleBtn">
				<uni-icons type="tune" size="16" class="mr-10" /> {{ type }}
			</view>
		</view>
		<view class="talent-container-content">
			<view class="search">
				<view class="areaType" style="width: 15%;">
					全区<uni-icons class="ml-10" type="bottom" size="10"></uni-icons>
				</view>
				<uni-search-bar style="width: 75%;" placeholder="输入岗位/企业名称关键词" @confirm="" @input="" />
				<uni-icons style="width: 10%;" type="search"></uni-icons>
			</view>
			<view class="filters mt-20">
				<uni-row :gutter="8">
					<uni-col :span="4">行业<uni-icons class="ml-10" type="bottom" size="10"></uni-icons></uni-col>
					<uni-col :span="5">岗位类型<uni-icons class="ml-10" type="bottom" size="10"></uni-icons></uni-col>
					<uni-col :span="4">学历<uni-icons class="ml-10" type="bottom" size="10"></uni-icons></uni-col>
					<uni-col :span="5">工作经验<uni-icons class="ml-10" type="bottom" size="10"></uni-icons></uni-col>
					<uni-col :span="6">薪酬待遇<uni-icons class="ml-10" type="bottom" size="10"></uni-icons></uni-col>
				</uni-row>
			</view>
			<view class="position-list" v-if="type==='人才'">
				<PositionCard v-for="(item,idx) in talentPostions" :key="idx" :data="item" card-type="talent" />
				<!-- <PositionCard />
				<PositionCard />
				<PositionCard />
				<PositionCard /> -->
			</view>
			<view class="position-list" v-if="type==='岗位'">
				<PositionCard v-for="(item,idx) in postions" :key="idx" :data="item" card-type="position" />
			</view>
		</view>
	</view>
</template>

<script>
	import CustomNav from '../../components/CustomNav/index.vue'
	import PositionCard from '../../components/PositionCard/index.vue'
	
	export default {
		components: {
			CustomNav,
			PositionCard
		},
		data() {
			return {
				type: '人才',
				navInfo: {
					bg_color: 'transparent',
					color: "#fff",
					name: '人才招聘'
				},
				talentPostions: [
					{
						title: '网络信息安全工程师',
						salary: '8千-1.3万/月',
						tags: ['1-2年', '大学本科', '无锡市'],
						company: '江苏科技有限公公司'
					},
					{
						title: '网络信息安全工程师',
						salary: '8千-1.3万/月',
						tags: ['1-2年', '大学本科', '无锡市'],
						company: '江苏科技有限公公司'
					},
					{
						title: '网络信息安全工程师',
						salary: '8千-1.3万/月',
						tags: ['1-2年', '大学本科', '无锡市'],
						company: '江苏科技有限公公司'
					},
					{
						title: '网络信息安全工程师',
						salary: '8千-1.3万/月',
						tags: ['1-2年', '大学本科', '无锡市'],
						company: '江苏科技有限公公司'
					},
					{
						title: '网络信息安全工程师',
						salary: '8千-1.3万/月',
						tags: ['1-2年', '大学本科', '无锡市'],
						company: '江苏科技有限公公司'
					}
				],
				postions: [
					{
						title: '赵女士',
						salary: '8千-1.3万/月',
						tags: ['1-2年', '大学本科', '无锡市'],
						company: '意向职位: 物流专员/助理'
					},
					{
						title: '赵女士',
						salary: '8千-1.3万/月',
						tags: ['1-2年', '大学本科', '无锡市'],
						company: '意向职位: 物流专员/助理'
					},
					{
						title: '赵女士',
						salary: '8千-1.3万/月',
						tags: ['1-2年', '大学本科', '无锡市'],
						company: '意向职位: 物流专员/助理'
					},
					{
						title: '赵女士',
						salary: '8千-1.3万/月',
						tags: ['1-2年', '大学本科', '无锡市'],
						company: '意向职位: 物流专员/助理'
					},
					{
						title: '赵女士',
						salary: '8千-1.3万/月',
						tags: ['1-2年', '大学本科', '无锡市'],
						company: '意向职位: 物流专员/助理'
					}
				]
			}
		},
		methods: {
			toggleBtn() {
				console.log('1' ,this.type)
				if (this.type === '人才') {
					this.type = '岗位'
				}else if (this.type === '岗位') {
					this.type = '人才'
				}
				console.log('2', this.type)
			}
		}
	}
</script>

<style lang="scss">
.talent-container {
	min-height: 100vh;
	background-color: #F4F6F8;
	&-top {
		position: relative;
		.toggle-btn {
			position: absolute;
			right: 30rpx;
			bottom: 70rpx;
			background-color: #fff;
			color: #211D1D;
			font-size: 24rpx;
			width: 150rpx;
			border-radius: 60rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.talent-container-content {
		background-color: #fff;
		.search {
			background-color: #fff;
			width: 90%;
			margin: 0 auto;
			margin-top: -50rpx;
			display: flex;
			align-items: center;
			position: relative;
			border-radius: 10rpx;
			.areaType {
				padding: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.filters {
			text-align: center;
			color: #292F38;
			font-size: 24rpx;
		}
	}
}
</style>
